<!--选择资源-->
<template>
  <div style="text-align: center">
    <transition name="fade" :appear="true">
      <el-card shadow="hover" style="width: 720px;height: 120px;padding: 5px 0 40px 0;margin: 0 auto">
        <div id="selector" style="display: block;width: 100%;text-align: center">
          <!--选择搜索方式-->
          <div  style="margin: 0 auto;display: inline-flex">
            <el-radio-group v-model="searchType" >
              <el-radio :label="1">按标签搜索</el-radio>
              <el-radio :label="2">按关键字搜索</el-radio>
            </el-radio-group>
          </div>

          <div style="display: block">
            <div v-if="searchType===1" style="margin: 20px auto;width: fit-content;display: inline-flex">
              <!--选择搜索大类-->
              <div class="float-div" >
                <el-select v-model="selectedCategory" clearable placeholder="请选择大类" key="select-category">
                  <el-option
                      v-for="(item,index) in resourceCategories"
                      :key="'resource'+item"
                      :label="item"
                      :value="index">
                  </el-option>
                </el-select>
              </div>
              <!--标签搜索-->
              <div class="float-div"  style="margin-left: 10px;display: inline-flex">
                <el-popover
                    placement="bottom"
                    width="500"
                    trigger="click"
                    ref="badge-popover">
                  <div id="badge-box">
                    <el-button
                        v-for="tag in categoryTags"
                        @click="tagStateChange(tag,!tag.isPrimary,$event)"
                        :key="'ct'+tag.text"
                        size="medium"
                        round
                        :type="tag.isPrimary?'primary':''"
                        style="margin: 2px">
                      {{tag.text}}
                      <i :class=tag.iconClass></i>
                    </el-button>
                    <el-button  type="text" @click="resetAllTags">一键取消选中</el-button>
                  </div>
                  <div class="float-div" slot="reference" style="margin: 0;padding: 0">
                    <el-button type="" round plain>查看所有标签</el-button>
                  </div>
                </el-popover>
              </div>


              <div class="float-div" style="padding-top: 6px;display: inline-flex" >
                <el-tag
                    v-for="tag in selectedTags"
                    :key="'st'+tag.text"
                    size="medium"
                    round
                    style="margin: 0 2px 0px 2px">
                  {{tag.text}}
                </el-tag>

              </div>
            </div>

            <!--关键字搜索-->
            <!--todo:bug-->
            <div v-else  style="margin: 20px auto;width: fit-content;display: inline-flex" >
              <el-select
                  v-model="keySearchText"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="找不到分类？来搜搜看吧！"
                  :remote-method="keyTagSearch"
                  :loading="searchLoading">
                <el-option
                    v-for="item in relatedKeys"
                    :key="item.value"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>

            <div  style="margin-left:10px;display: inline-flex">
              <el-button icon="el-icon-search" circle type="primary"></el-button>
            </div>
          </div>



        </div>
      </el-card>
    </transition>
  </div>


</template>

<script>
import {SubjectTags} from "./Category";
import {ResourceCategories} from "./Category";
import {EbookTags} from "./Category";
import {SoftwareTags} from "./Category";

import 'element-ui/lib/theme-chalk/base.css'
import {AxiosNetwork} from "../../../plugins/axios";
export default {
  name: "Selectors",
  data(){
    return{
      //大类
      resourceCategories:[],
      selectedCategory:'',

      //标签
      categoryTags:[],
      selectedTags:[],

      //关键字
      keySearchText:'',
      relatedKeys:['哈哈哈','呵呵呵'],

      searchLoading:false,
      searchType:1,
    }
  },
  methods:{
    //从服务器端获取分类及tags
    getAllCategories(){
      AxiosNetwork('GET','/')
    },
    //重置选中标签
    resetAllTags(){
      for (let tag of this.categoryTags){
        this.tagStateChange(tag,false)
      }
    },

    //标签状态改变
    tagStateChange(tag,isSelected){
      //选中
      if (isSelected){
        if (this.selectedTags.length>=3){
          this.openTagsAmountWarn()
        }else {
          tag.isPrimary = true
          tag.iconClass = 'zhiran-iconcha'
          this.selectedTags.push(tag)
        }
      }else {       //取消选中
        tag.isPrimary = false
        tag.iconClass = 'zhiran-iconjiahao'
        this.selectedTags = this.selectedTags.filter((item)=>tag.text!==item.text)
      }
    },

    //todo 搜索keyTag
    keyTagSearch(){
      if (this.keySearchText!==""){
        this.searchLoading = true

      }
    },

    //根据不同的分类加载不同的tags
    categoryTagsChange(tags){
      let array=[]
      for(let e of tags){
        array.push({
          text:e,
          isPrimary:false,
          iconClass:'zhiran-iconjiahao',
        })
      }
      return array
    },

    openTagsAmountWarn(){
      this.$message({
        message:"标签选择数量上限为3个",
        type: "warning"
      })
    }
  },
  mounted(){
    this.resourceCategories = ResourceCategories

  },
  watch:{
    selectedCategory(val){
        switch (val){
          case 0:
            this.categoryTags = this.categoryTagsChange(SoftwareTags)
            break
          case 1:
            this.categoryTags = this.categoryTagsChange(SubjectTags)
            break
          case 2:
            this.categoryTags = this.categoryTagsChange(EbookTags)
            break
          default:
            this.categoryTags = []
        }
    },
    keySearchText(val){
      console.log("keySearchText="+val)
    }
  }
}
</script>

<style scoped>
  .float-div{
    float: left;
  }
  .float-div-right{
    float: right;
  }
  /*设置动态效果*/
  /*.fade-enter-active,.fade-leave-active{*/
  /*  transition: opacity .8s;*/
  /*}*/

  /*.fade-enter,.fade-leave-to{*/
  /*  opacity: 0;*/
  /*}*/
  /*.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{*/
  /*  transition: opacity .8s;*/
  /*}*/
  /*.el-zoom-in-center-enter,.el-zoom-in-center-leave-to{*/
  /*  opacity: 0;*/
  /*}*/

</style>